<template>
  <div>
    <p ref="numberDisplay" class="number">{{ number }}</p>
    <button @click="increaseNumber">Increase</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onUpdated } from 'vue'

const number = ref(0)

const increaseNumber = () => {
  number.value++
}

const numberDisplay = ref()

onUpdated(() => {
  // 在数据变化后给数字添加动画
  if (numberDisplay.value) {
    numberDisplay.value.style.transition = 'transform 0.5s'
    numberDisplay.value.style.transform = 'scale(1.2)'
    setTimeout(() => {
      numberDisplay.value.style.transform = 'scale(1)'
    }, 500)
  }
})
</script>

<style scoped>
.number {
  font-size: 2em;
}
</style>
